<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>
<body>
  <div id="app">
    <el-card>
      <el-form :model="form">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onLogin">登录</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</body>
<script>
const request = axios.create({
  baseURL: 'http://hmmm-api.itheima.net/'
})
function login(data){
  return request({
    url: '/frame/login',
    method: 'post',
    data
  })
}
new Vue({
  el: '#app',
  data(){
    return {
      form: {
        username: 'root@admin.com',
        password: '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'
      }
    }
  },
  methods: {
    async onLogin(){
      let res = await login(this.form)
      localStorage.token = res.data.token
      location.href = './list.html'
    }
  },
})
</script>
</html>
